--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / micron-editor / MicronEditorPage.vue
Displaying Raw • Download
meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue 8ade296fb16b8f8e145f0c83e97179c456325be3 (8ade296f) Text, 32.84 KB
Tb4b4b4<Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950"Tb4b4b4>
T8b949e<!-- Compact Header -->
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"flex flex-wrap items-center justify-between gap-2 px-3 sm:px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-slate-50/95 dark:bg-zinc-950/95 backdrop-blur-sm shrink-0 min-w-0"
Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex items-center gap-2 sm:gap-3 min-w-0"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"bg-teal-100 dark:bg-teal-900/30 p-1.5 rounded-xl shrink-0"Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"code-tags" Te6edf3classTff7b72=Ta5d6ff"size-5 text-teal-600 dark:text-teal-400" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col"Tb4b4b4>
Tb4b4b4<Tff7b72h1
Te6edf3classTff7b72=Ta5d6ff"text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider hidden sm:block truncate leading-tight"
Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.title"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72h1Tb4b4b4>
Tb4b4b4<Tff7b72a
Te6edf3hrefTff7b72=Ta5d6ff"https://git.quad4.io/RFnexus"
Te6edf3targetTff7b72=Ta5d6ff"_blank"
Te6edf3relTff7b72=Ta5d6ff"noopener noreferrer"
Te6edf3classTff7b72=Ta5d6ff"text-[10px] text-gray-500 hover:text-teal-500 transition-colors hidden sm:block leading-tight"
Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.parser_by"Tb4b4b4) Tff7b72}} RFnexus
Tb4b4b4<Tb4b4b4/Tff7b72aTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex items-center gap-2"Tb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3typeTff7b72=Ta5d6ff"button"
Te6edf3classTff7b72=Ta5d6ff"secondary-chip !py-1 !px-3 !text-red-500 hover:!bg-red-50 dark:hover:!bg-red-900/20"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3resetAllTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"refresh" Te6edf3classTff7b72=Ta5d6ff"w-3.5 h-3.5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"hidden sm:inline"Tb4b4b4>Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.reset"Tb4b4b4) Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tff7b72button Te6edf3typeTff7b72=Ta5d6ff"button" Te6edf3classTff7b72=Ta5d6ff"secondary-chip !py-1 !px-3" Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3downloadFileTa5d6ff"Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"download" Te6edf3classTff7b72=Ta5d6ff"w-3.5 h-3.5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"hidden sm:inline"Tb4b4b4>Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.save"Tb4b4b4) Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"relative"Tb4b4b4>
Tb4b4b4<Tff7b72button Te6edf3typeTff7b72=Ta5d6ff"button" Te6edf3classTff7b72=Ta5d6ff"primary-chip !py-1 !px-3" Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3togglePublishMenuTa5d6ff"Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"publish" Te6edf3classTff7b72=Ta5d6ff"w-3.5 h-3.5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"hidden sm:inline"Tb4b4b4>PublishTb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3showPublishMenuTa5d6ff"
Te6edf3v-click-outsideTff7b72=Ta5d6ff"Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4(Te6edf3showPublishMenu Tff7b72= Tff7b72falseTb4b4b4)Ta5d6ff"
Te6edf3classTff7b72=Ta5d6ff"absolute right-0 top-full mt-1 w-64 bg-white dark:bg-zinc-800 rounded-xl shadow-xl border border-gray-200 dark:border-zinc-700 z-50 py-2"
Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"px-3 py-1.5 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400"
Tb4b4b4>
Publish to Mesh Server
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3pageNodesTb4b4b4.Te6edf3length Tff7b72=== T79c0ff0Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"px-3 py-2 text-xs text-gray-500 dark:text-gray-400"Tb4b4b4>
No mesh servers available.
Tb4b4b4<Tff7b72router-link Te6edf3toTff7b72=Ta5d6ff"/mesh-server" Te6edf3classTff7b72=Ta5d6ff"text-blue-500 hover:underline"
Tb4b4b4>Create oneTb4b4b4<Tb4b4b4/Tff7b72router-link
Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3v-forTff7b72=Ta5d6ff"Te6edf3pn Tff7b72in Te6edf3pageNodesTa5d6ff"
Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Te6edf3pnTb4b4b4.Te6edf3node_idTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-zinc-700 flex items-center gap-2 transition-colors"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3publishToNodeTb4b4b4(Te6edf3pnTb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"w-2 h-2 rounded-full shrink-0"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Te6edf3pnTb4b4b4.Te6edf3running Tff7b72? Ta5d6ff'bg-green-500' Tff7b72: Ta5d6ff'bg-gray-400'Ta5d6ff"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"truncate text-gray-900 dark:text-white"Tb4b4b4>Tff7b72{{ Te6edf3pnTb4b4b4.Te6edf3name Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"border-t border-gray-200 dark:border-zinc-700 mt-1 pt-1"Tb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3classTff7b72=Ta5d6ff"w-full text-left px-3 py-2 text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3publishAllToNodeTa5d6ff"
Tb4b4b4>
Publish all tabs to server...
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72button Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isMobileViewTa5d6ff" Te6edf3typeTff7b72=Ta5d6ff"button" Te6edf3classTff7b72=Ta5d6ff"primary-chip !py-1 !px-3" Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3toggleViewTa5d6ff"Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Tb4b4b4:Te6edf3icon-nameTff7b72=Ta5d6ff"Te6edf3showEditor Tff7b72? Ta5d6ff'eye' Tff7b72: Ta5d6ff'pencil'Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"w-3.5 h-3.5" Tb4b4b4/Tb4b4b4>
Tff7b72{{ Te6edf3showEditor Tff7b72? Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.view_preview"Tb4b4b4) Tff7b72: Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.edit"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- Tab Bar -->
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"flex items-center px-3 sm:px-4 py-1 gap-1 border-b border-gray-200 dark:border-zinc-800 bg-slate-100 dark:bg-zinc-900 overflow-x-auto no-scrollbar shrink-0"
Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-forTff7b72=Ta5d6ff"Tb4b4b4(Te6edf3tabTb4b4b4, Te6edf3indexTb4b4b4) Tff7b72in Te6edf3tabsTa5d6ff"
Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Te6edf3tabTb4b4b4.Te6edf3idTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"group flex items-center h-8 px-3 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4[
Te6edf3activeTabIndex Tff7b72=== Te6edf3index
Tff7b72? Ta5d6ff'bg-white dark:bg-zinc-800 text-teal-600 dark:text-teal-400 shadow-sm'
Tff7b72: Ta5d6ff'text-gray-500 hover:bg-white/50 dark:hover:bg-zinc-800/50 hover:text-gray-700 dark:hover:text-zinc-300'Tb4b4b4,
Tb4b4b4]Ta5d6ff"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3activeTabIndex Tff7b72= Te6edf3indexTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3editingTabIndex Tff7b72!== Te6edf3indexTa5d6ff" Tb4b4b4@Te6edf3dblclickTff7b72=Ta5d6ff"Te6edf3startEditingTabTb4b4b4(Te6edf3indexTb4b4b4)Ta5d6ff"Tb4b4b4>Tff7b72{{ Te6edf3tabTb4b4b4.Te6edf3name Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tff7b72input
Te6edf3v-else
Te6edf3refTff7b72=Ta5d6ff"tabInput"
Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3editingTabNameTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"bg-transparent border-none focus:ring-0 w-20 p-0 text-inherit"
Tb4b4b4@Te6edf3blurTff7b72=Ta5d6ff"Te6edf3finishEditingTabTa5d6ff"
Tb4b4b4@Te6edf3keyupTb4b4b4.Te6edf3enterTff7b72=Ta5d6ff"Te6edf3finishEditingTabTa5d6ff"
@Te6edf3click.Te6edf3stop
Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72> T79c0ff1Ta5d6ff"
Te6edf3classTff7b72=Ta5d6ff"ml-2 opacity-0 group-hover:opacity-100 hover:text-red-500 transition-opacity"
Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3removeTabTb4b4b4(Te6edf3indexTb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"close" Te6edf3classTff7b72=Ta5d6ff"size-3" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3classTff7b72=Ta5d6ff"flex items-center justify-center size-8 text-gray-400 hover:text-teal-500 transition-colors"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3addTabTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"plus" Te6edf3classTff7b72=Ta5d6ff"size-4" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex-1 flex overflow-hidden min-w-0 pb-[env(safe-area-inset-bottom)]"Tb4b4b4>
T8b949e<!-- Editor Pane -->
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72> T79c0ff0Ta5d6ff"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4[
Ta5d6ff'flex-1 overflow-hidden flex flex-col'Tb4b4b4,
Te6edf3isMobileView Tff7b72&& Tff7b72!Te6edf3showEditor Tff7b72? Ta5d6ff'hidden' Tff7b72: Ta5d6ff''Tb4b4b4,
Tff7b72!Te6edf3isMobileView Tff7b72? Ta5d6ff'border-r border-gray-200 dark:border-zinc-800' Tff7b72: Ta5d6ff''Tb4b4b4,
Tb4b4b4]Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72textarea
Te6edf3refTff7b72=Ta5d6ff"editorRef"
Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3tabsTb4b4b4[Te6edf3activeTabIndexTb4b4b4]Tb4b4b4.Te6edf3contentTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"flex-1 w-full bg-white dark:bg-zinc-900 text-gray-900 dark:text-white p-4 font-mono text-sm resize-none focus:outline-none"
Tb4b4b4:Te6edf3placeholderTff7b72=Ta5d6ff"Te6edf3$tTb4b4b4(Ta5d6ff'tools.micron_editor.placeholder'Tb4b4b4)Ta5d6ff"
Tb4b4b4@Te6edf3inputTff7b72=Ta5d6ff"Te6edf3handleInputTa5d6ff"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72textareaTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- Preview Pane (Always dark to match NomadNet browser vibe) -->
Tb4b4b4<Tff7b72div
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4[
Ta5d6ff'flex-1 overflow-hidden flex flex-col bg-zinc-950'Tb4b4b4,
Te6edf3isMobileView Tff7b72&& Te6edf3showEditor Tff7b72? Ta5d6ff'hidden' Tff7b72: Ta5d6ff''Tb4b4b4,
Tb4b4b4]Ta5d6ff"
Tb4b4b4>
T8b949e<!-- eslint-disable vue/no-v-html -->
Tb4b4b4<Tff7b72div
Te6edf3refTff7b72=Ta5d6ff"previewRef"
Te6edf3classTff7b72=Ta5d6ff"flex-1 overflow-auto text-zinc-100 p-4 font-mono text-sm whitespace-pre-wrap break-words nodeContainer"
Te6edf3v-htmlTff7b72=Ta5d6ff"Te6edf3renderedContentTa5d6ff"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- eslint-enable vue/no-v-html -->
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72scriptTb4b4b4>
Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"../MaterialDesignIcon.vue"Tb4b4b4;
Tff7b72import Te6edf3MicronParser Tff7b72from Ta5d6ff"../../js/MicronParser.js"Tb4b4b4;
Tff7b72import Tb4b4b4{ Te6edf3micronStorage Tb4b4b4} Tff7b72from Ta5d6ff"../../js/MicronStorage"Tb4b4b4;
Tff7b72import Te6edf3DialogUtils Tff7b72from Ta5d6ff"../../js/DialogUtils"Tb4b4b4;
Tff7b72export Tff7b72default Tb4b4b4{
Te6edf3nameTff7b72: Ta5d6ff"MicronEditorPage"Tb4b4b4,
Te6edf3componentsTff7b72: Tb4b4b4{
Te6edf3MaterialDesignIconTb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3tabsTff7b72: Tb4b4b4[Tb4b4b4]Tb4b4b4,
Te6edf3activeTabIndexTff7b72: T79c0ff0Tb4b4b4,
Te6edf3renderedContentTff7b72: Ta5d6ff""Tb4b4b4,
Te6edf3showEditorTff7b72: Tff7b72trueTb4b4b4,
Te6edf3isMobileViewTff7b72: Tff7b72falseTb4b4b4,
Te6edf3storageKeyTff7b72: Ta5d6ff"micron_editor_content"Tb4b4b4,
Te6edf3editingTabIndexTff7b72: Tff7b72-T79c0ff1Tb4b4b4,
Te6edf3editingTabNameTff7b72: Ta5d6ff""Tb4b4b4,
Te6edf3showPublishMenuTff7b72: Tff7b72falseTb4b4b4,
Te6edf3pageNodesTff7b72: Tb4b4b4[Tb4b4b4]Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3watchTff7b72: Tb4b4b4{
Te6edf3activeTabIndexTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3renderActiveTabTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3mountedTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72await Tff7b72thisTb4b4b4.Te6edf3loadContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3handleResizeTb4b4b4(Tb4b4b4)Tb4b4b4;
Tffa657windowTb4b4b4.Te6edf3addEventListenerTb4b4b4(Ta5d6ff"resize"Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3handleResizeTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3renderActiveTabTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3beforeUnmountTb4b4b4(Tb4b4b4) Tb4b4b4{
Tffa657windowTb4b4b4.Te6edf3removeEventListenerTb4b4b4(Ta5d6ff"resize"Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3handleResizeTb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3methodsTff7b72: Tb4b4b4{
Te6edf3handleResizeTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3isMobileView Tff7b72= Tffa657windowTb4b4b4.Te6edf3innerWidth Tff7b72< T79c0ff1024Tb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72!Tff7b72thisTb4b4b4.Te6edf3isMobileViewTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3showEditor Tff7b72= Tff7b72trueTb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3handleInputTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3renderActiveTabTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3renderActiveTabTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72=== T79c0ff0 Tff7b72|| Tff7b72!Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3renderedContent Tff7b72= Ta5d6ff""Tb4b4b4;
Tff7b72returnTb4b4b4;
Tb4b4b4}
Tff7b72try Tb4b4b4{
Tff7b72const Te6edf3parser Tff7b72= Tff7b72new Te6edf3MicronParserTb4b4b4(Tff7b72trueTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3renderedContent Tff7b72= Te6edf3parserTb4b4b4.Te6edf3convertMicronToHtmlTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4.Te6edf3contentTb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3errorTb4b4b4) Tb4b4b4{
Te6edf3consoleTb4b4b4.Te6edf3errorTb4b4b4(Ta5d6ff"Error rendering micron:"Tb4b4b4, Te6edf3errorTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3renderedContent Tff7b72= Ta5d6ff`Ta5d6ff<p style="color: red;">Error rendering: Tffd700${Te6edf3errorTb4b4b4.Te6edf3messageTffd700}Ta5d6ff</p>Ta5d6ff`Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3toggleViewTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3showEditor Tff7b72= Tff7b72!Tff7b72thisTb4b4b4.Te6edf3showEditorTb4b4b4;
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3saveContentTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72try Tb4b4b4{
Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3saveTabsTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3errorTb4b4b4) Tb4b4b4{
Te6edf3consoleTb4b4b4.Te6edf3warnTb4b4b4(Ta5d6ff"Failed to save content to IndexedDB:"Tb4b4b4, Te6edf3errorTb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3loadContentTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72try Tb4b4b4{
Tff7b72const Te6edf3savedTabs Tff7b72= Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3loadTabsTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3savedTabs Tff7b72&& Te6edf3savedTabsTb4b4b4.Te6edf3length Tff7b72> T79c0ff0Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Te6edf3savedTabsTb4b4b4;
Tb4b4b4} Tff7b72else Tb4b4b4{
T8b949e// Try to migrate from localStorage
Tff7b72const Te6edf3oldContent Tff7b72= Te6edf3localStorageTb4b4b4.Te6edf3getItemTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3storageKeyTb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3oldContentTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Tb4b4b4[
Tb4b4b4{
Te6edf3idTff7b72: Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4)Tb4b4b4,
Te6edf3nameTff7b72: Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.main_tab"Tb4b4b4)Tb4b4b4,
Te6edf3contentTff7b72: Te6edf3oldContentTb4b4b4,
Tb4b4b4}Tb4b4b4,
Tff7b72thisTb4b4b4.Te6edf3createGuideTabTb4b4b4(Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4) Tff7b72+ T79c0ff1Tb4b4b4)Tb4b4b4,
Tb4b4b4]Tb4b4b4;
Te6edf3localStorageTb4b4b4.Te6edf3removeItemTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3storageKeyTb4b4b4)Tb4b4b4;
Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3saveTabsTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72else Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Tb4b4b4[Tff7b72thisTb4b4b4.Te6edf3createDefaultTabTb4b4b4(Tb4b4b4)Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3createGuideTabTb4b4b4(Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4) Tff7b72+ T79c0ff1Tb4b4b4)Tb4b4b4]Tb4b4b4;
Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3saveTabsTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}
Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3errorTb4b4b4) Tb4b4b4{
Te6edf3consoleTb4b4b4.Te6edf3warnTb4b4b4(Ta5d6ff"Failed to load content from IndexedDB:"Tb4b4b4, Te6edf3errorTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Tb4b4b4[Tff7b72thisTb4b4b4.Te6edf3createDefaultTabTb4b4b4(Tb4b4b4)Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3createGuideTabTb4b4b4(Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4) Tff7b72+ T79c0ff1Tb4b4b4)Tb4b4b4]Tb4b4b4;
Tb4b4b4}
Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72= T79c0ff0Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3createDefaultTabTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3idTff7b72: Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4)Tb4b4b4,
Te6edf3nameTff7b72: Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.main_tab"Tb4b4b4)Tb4b4b4,
Te6edf3contentTff7b72: Tff7b72thisTb4b4b4.Te6edf3getDefaultContentTb4b4b4(Tb4b4b4)Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3createGuideTabTb4b4b4(Te6edf3id Tff7b72= Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4)Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3idTff7b72: Te6edf3idTb4b4b4,
Te6edf3nameTff7b72: Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.guide_tab"Tb4b4b4)Tb4b4b4,
Te6edf3contentTff7b72: Tff7b72thisTb4b4b4.Te6edf3getGuideContentTb4b4b4(Tb4b4b4)Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3addTabTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3newTab Tff7b72= Tb4b4b4{
Te6edf3idTff7b72: Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4)Tb4b4b4,
Te6edf3nameTff7b72: Ta5d6ff`Tffd700${Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.new_tab"Tb4b4b4)Tffd700}Ta5d6ff Tffd700${Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72+ T79c0ff1Tffd700}Ta5d6ff`Tb4b4b4,
Te6edf3contentTff7b72: Ta5d6ff""Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3pushTb4b4b4(Te6edf3newTabTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72- T79c0ff1Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3removeTabTb4b4b4(Te6edf3indexTb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72await Te6edf3DialogUtilsTb4b4b4.Te6edf3confirmTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.confirm_delete_tab"Tb4b4b4)Tb4b4b4)Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3spliceTb4b4b4(Te6edf3indexTb4b4b4, T79c0ff1Tb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72>= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3lengthTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72= Tffa657MathTb4b4b4.Te6edf3maxTb4b4b4(T79c0ff0Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72- T79c0ff1Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3startEditingTabTb4b4b4(Te6edf3indexTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3editingTabIndex Tff7b72= Te6edf3indexTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3editingTabName Tff7b72= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Te6edf3indexTb4b4b4]Tb4b4b4.Te6edf3nameTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3tabInput Tff7b72&& Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3tabInputTb4b4b4[T79c0ff0Tb4b4b4]Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3tabInputTb4b4b4[T79c0ff0Tb4b4b4]Tb4b4b4.Te6edf3focusTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3finishEditingTabTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3editingTabIndex Tff7b72!== Tff7b72-T79c0ff1Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3editingTabNameTb4b4b4.Te6edf3trimTb4b4b4(Tb4b4b4)Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3editingTabIndexTb4b4b4]Tb4b4b4.Te6edf3name Tff7b72= Tff7b72thisTb4b4b4.Te6edf3editingTabNameTb4b4b4.Te6edf3trimTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tff7b72thisTb4b4b4.Te6edf3editingTabIndex Tff7b72= Tff7b72-T79c0ff1Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3resetAllTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72await Te6edf3DialogUtilsTb4b4b4.Te6edf3confirmTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.confirm_reset"Tb4b4b4)Tb4b4b4)Tb4b4b4) Tb4b4b4{
Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3clearAllTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Tb4b4b4[Tff7b72thisTb4b4b4.Te6edf3createDefaultTabTb4b4b4(Tb4b4b4)Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3createGuideTabTb4b4b4(Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4) Tff7b72+ T79c0ff1Tb4b4b4)Tb4b4b4]Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72= T79c0ff0Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3renderActiveTabTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72await Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3getDefaultContentTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3b Tff7b72= Ta5d6ff"`"Tb4b4b4;
Tff7b72return Ta5d6ff`Tffd700${Te6edf3bTffd700}Ta5d6ffFfd0
Tffd700${Te6edf3bTffd700}Ta5d6ff=
_ _
(_) (_)
_ __ ___ _ ___ _ __ ___ _ __ ______ _ __ __ _ _ __ ___ ___ _ __ _ ___
| '_ Ta5d6ff\`Ta5d6ff _ Ta5d6ff\\Ta5d6ff| |/ __| '__/ _ Ta5d6ff\\Ta5d6ff| '_ Ta5d6ff\\Ta5d6ff______| '_ Ta5d6ff\\Ta5d6ff / _Ta5d6ff\`Ta5d6ff | '__/ __|/ _ Ta5d6ff\\Ta5d6ff '__| / __|
| | | | | | | (__| | | (_) | | | | | |_) | (_| | | Ta5d6ff\\Ta5d6ff__ Ta5d6ff\\Ta5d6ff\\Ta5d6ff __/ |_ | Ta5d6ff\\Ta5d6ff__ Ta5d6ff\\Ta5d6ff\\
Ta5d6ff |_| |_| |_|_|Ta5d6ff\\Ta5d6ff___|_| Ta5d6ff\\Ta5d6ff___/|_| |_| | .__/ Ta5d6ff\\Ta5d6ff__,_|_| |___/Ta5d6ff\\Ta5d6ff___|_(_)| |___/
| | _/ |
|_| |__/
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Ta5d6fff
Tffd700${Te6edf3bTffd700}Ta5d6ff!Welcome to Micron EditorTffd700${Te6edf3bTffd700}Ta5d6ff!
Micron is a lightweight, terminal-friendly monospace markdown format used in Reticulum applications.
Tffd700${Te6edf3bTffd700}Ta5d6ff!With Micron, you canTffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}Ta5d6ff:
Tffd700${Te6edf3bTffd700}Ta5d6ffc AlignTffd700${Te6edf3bTffd700}Ta5d6ffb
Tffd700${Te6edf3bTffd700}Ta5d6ffr text,
Tffd700${Te6edf3bTffd700}Ta5d6ffa
Tffd700${Te6edf3bTffd700}Ta5d6ffc
set Tffd700${Te6edf3bTffd700}Ta5d6ffB005 backgrounds, Tffd700${Te6edf3bTffd700}Ta5d6ffb and Tffd700${Te6edf3bTffd700}Ta5d6ff*Tffd700${Te6edf3bTffd700}Ta5d6ff Tffd700${Te6edf3bTffd700}Ta5d6ffB777Tffd700${Te6edf3bTffd700}Ta5d6ffFfffcombine any number ofTffd700${Te6edf3bTffd700}Ta5d6fffTffd700${Te6edf3bTffd700}Ta5d6ffbTffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6ff_ Tffd700${Te6edf3bTffd700}Ta5d6ffFf00fTffd700${Te6edf3bTffd700}Ta5d6ffFf80oTffd700${Te6edf3bTffd700}Ta5d6ffFfd0rTffd700${Te6edf3bTffd700}Ta5d6ffF9f0mTffd700${Te6edf3bTffd700}Ta5d6ffF0f2aTffd700${Te6edf3bTffd700}Ta5d6ffF0fdtTffd700${Te6edf3bTffd700}Ta5d6ffF07ftTffd700${Te6edf3bTffd700}Ta5d6ffF43fiTffd700${Te6edf3bTffd700}Ta5d6ffF70fnTffd700${Te6edf3bTffd700}Ta5d6ffFe0fg Tffd700${Te6edf3bTffd700}Ta5d6ffftags.
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Getting Started
Start editing your Micron markup in the editor pane. The preview will update automatically.
Formatting
Text can be Tffd700${Te6edf3bTffd700}Ta5d6ff!boldTffd700${Te6edf3bTffd700}Ta5d6ff! by using Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff!, Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff_, and Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff*.
Colors
Foreground colors: Tffd700${Te6edf3bTffd700}Ta5d6ffFf00Tffd700${Te6edf3bTffd700}Ta5d6ffFf80oTffd700${Te6edf3bTffd700}Ta5d6ffFfd0rTffd700${Te6edf3bTffd700}Ta5d6ffF9f0mTffd700${Te6edf3bTffd700}Ta5d6ffF0f2aTffd700${Te6edf3bTffd700}Ta5d6ffF0fdtTffd700${Te6edf3bTffd700}Ta5d6ffF07ftTffd700${Te6edf3bTffd700}Ta5d6ffF43fiTffd700${Te6edf3bTffd700}Ta5d6ffF70fnTffd700${Te6edf3bTffd700}Ta5d6ffFe0fgTffd700${Te6edf3bTffd700}Ta5d6fff
Background colors: Tffd700${Te6edf3bTffd700}Ta5d6ffBf00Tffd700${Te6edf3bTffd700}Ta5d6ffBf80oTffd700${Te6edf3bTffd700}Ta5d6ffBfd0rTffd700${Te6edf3bTffd700}Ta5d6ffB9f0mTffd700${Te6edf3bTffd700}Ta5d6ffB0f2aTffd700${Te6edf3bTffd700}Ta5d6ffB0fdtTffd700${Te6edf3bTffd700}Ta5d6ffB07ftTffd700${Te6edf3bTffd700}Ta5d6ffB43fiTffd700${Te6edf3bTffd700}Ta5d6ffB70fnTffd700${Te6edf3bTffd700}Ta5d6ffBe0fgTffd700${Te6edf3bTffd700}Ta5d6ffb
Links
Create links with Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff[ tag: Tffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6ff[Example LinkTffd700${Te6edf3bTffd700}Ta5d6ffexample.com]Tffd700${Te6edf3bTffd700}Ta5d6ff]Tffd700${Te6edf3bTffd700}Ta5d6ff_
Literals
Use Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff= to start/end literal blocks that won't be interpreted.
Tffd700${Te6edf3bTffd700}Ta5d6ff=
This is a literal block
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Ta5d6ff`Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3getGuideContentTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3b Tff7b72= Ta5d6ff"`"Tb4b4b4;
Tff7b72return Ta5d6ff`Ta5d6ff-∿
Tffd700${Te6edf3bTffd700}Ta5d6ffcTffd700${Te6edf3bTffd700}Ta5d6ff!Hello!Tffd700${Te6edf3bTffd700}Ta5d6ff! This is output from Tffd700${Te6edf3bTffd700}Ta5d6ff*micronTffd700${Te6edf3bTffd700}Ta5d6ff*
Micron generates formatted text for your terminal
Tffd700${Te6edf3bTffd700}Ta5d6ffa
∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿
Nomad Network supports a simple and functional markup language called Tffd700${Te6edf3bTffd700}Ta5d6ff*micronTffd700${Te6edf3bTffd700}Ta5d6ff*. If you are familiar with Tffd700${Te6edf3bTffd700}Ta5d6ff*markdownTffd700${Te6edf3bTffd700}Ta5d6ff* or Tffd700${Te6edf3bTffd700}Ta5d6ff*HTMLTffd700${Te6edf3bTffd700}Ta5d6ff*, you will feel right at home writing pages with micron.
With micron you can easily create structured documents and pages with formatting, colors, glyphs and icons, ideal for display in terminals.
Recommendations and Requirements
While micron can output formatted text to even the most basic terminal, there's a few capabilities your terminal Tffd700${Te6edf3bTffd700}Ta5d6ff*mustTffd700${Te6edf3bTffd700}Ta5d6ff* support to display micron output correctly, and some that, while not strictly necessary, make the experience a lot better.
Formatting such as Tffd700${Te6edf3bTffd700}Ta5d6ff_underlineTffd700${Te6edf3bTffd700}Ta5d6ff_, Tffd700${Te6edf3bTffd700}Ta5d6ff!boldTffd700${Te6edf3bTffd700}Ta5d6ff! or Tffd700${Te6edf3bTffd700}Ta5d6ff*italicsTffd700${Te6edf3bTffd700}Ta5d6ff* will be displayed if your terminal supports it.
If you are having trouble getting micron output to display correctly, try using Tffd700${Te6edf3bTffd700}Ta5d6ff*gnome-terminalTffd700${Te6edf3bTffd700}Ta5d6ff* or Tffd700${Te6edf3bTffd700}Ta5d6ff*alacrittyTffd700${Te6edf3bTffd700}Ta5d6ff*, which should work with all formatting options out of the box. Most other terminals will work fine as well, but you might have to change some settings to get certain formatting to display correctly.
Encoding
All micron sources are intepreted as UTF-8, and micron assumes it can output UTF-8 characters to the terminal. If your terminal does not support UTF-8, output will be faulty.
Colors
Shading and coloring text and backgrounds is integral to micron output, and while micron will attempt to gracefully degrade output even to 1-bit terminals, you will get the best output with terminals supporting at least 256 colors. True-color support is recommended.
Terminal Font
While any unicode capable font can be used with micron, it's highly recommended to use a Tffd700${Te6edf3bTffd700}Ta5d6ff*"Nerd Font"Tffd700${Te6edf3bTffd700}Ta5d6ff* (see https://www.nerdfonts.com/), which will add a lot of extra glyphs and icons to your output.
A Few Demo Outputs
Tffd700${Te6edf3bTffd700}Ta5d6ffF222Tffd700${Te6edf3bTffd700}Ta5d6ffBddd
Tffd700${Te6edf3bTffd700}Ta5d6ffcWith micron, you can control layout and presentation
Tffd700${Te6edf3bTffd700}Ta5d6ffa
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Tffd700${Te6edf3bTffd700}Ta5d6ffB33f
You can change background ...
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Tffd700${Te6edf3bTffd700}Ta5d6ffB393
Tffd700${Te6edf3bTffd700}Ta5d6ffrTffd700${Te6edf3bTffd700}Ta5d6ffF320... and foreground colorsTffd700${Te6edf3bTffd700}Ta5d6fff
Tffd700${Te6edf3bTffd700}Ta5d6ffa
Tffd700${Te6edf3bTffd700}Ta5d6ffb
If you want to make a break, horizontal dividers can be inserted. They can be plain, like the one below this text, or you can style them with unicode characters and glyphs, like the wavy divider in the beginning of this document.
Tffd700${Te6edf3bTffd700}Ta5d6ffcText can be Tffd700${Te6edf3bTffd700}Ta5d6ff_underlinedTffd700${Te6edf3bTffd700}Ta5d6ff_, Tffd700${Te6edf3bTffd700}Ta5d6ff!boldTffd700${Te6edf3bTffd700}Ta5d6ff! or Tffd700${Te6edf3bTffd700}Ta5d6ff*italicTffd700${Te6edf3bTffd700}Ta5d6ff*.
You can also Tffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6ff*Tffd700${Te6edf3bTffd700}Ta5d6ff!B5d5Tffd700${Te6edf3bTffd700}Ta5d6ffF222combineTffd700${Te6edf3bTffd700}Ta5d6fffTffd700${Te6edf3bTffd700}Ta5d6ffbTffd700${Te6edf3bTffd700}Ta5d6ff_ Tffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6ffFf00fTffd700${Te6edf3bTffd700}Ta5d6ffFf80oTffd700${Te6edf3bTffd700}Ta5d6ffFfd0rTffd700${Te6edf3bTffd700}Ta5d6ffF9f0mTffd700${Te6edf3bTffd700}Ta5d6ffF0f2aTffd700${Te6edf3bTffd700}Ta5d6ffF0fdtTffd700${Te6edf3bTffd700}Ta5d6ffF07ftTffd700${Te6edf3bTffd700}Ta5d6ffF43fiTffd700${Te6edf3bTffd700}Ta5d6ffF70fnTffd700${Te6edf3bTffd700}Ta5d6ffFe0fgTffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}Ta5d6ff for some fabulous effects.
Tffd700${Te6edf3bTffd700}Ta5d6ffa
Sections and Headings
You can define an arbitrary number of sections and sub sections, each with their own named headings. Text inside sections will be automatically indented.
If you place a divider inside a section, it will adhere to the section indents.
If no heading text is defined, the section will appear as a sub-section without a header. This can be useful for creating indented blocks of text, like this one.
Micron tags
Tags are used to format text with micron. Some tags can appear anywhere in text, and some must appear at the beginning of a line. If you need to write text that contains a sequence that would be interpreted as a tag, you can escape it with the character Ta5d6ff\\Ta5d6ff.
In the following sections, the different tags will be introduced. Any styling set within micron can be reset to the default style by using the special Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff tag anywhere in the markup, which will immediately remove any formatting previously specified.
Alignment
To control text alignment use the tag Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ffc to center text, Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ffl to left-align, Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ffr to right-align, and Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ffa to return to the default alignment of the document. Alignment tags must appear at the beginning of a line. Here is an example:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Ta5d6ffcThis line will be centered.
So will this.
Tffd700${Te6edf3bTffd700}Ta5d6ffaThe alignment has now been returned to default.
Tffd700${Te6edf3bTffd700}Ta5d6ffrThis will be aligned to the right
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
The above markup produces the following output:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaaTffd700${Te6edf3bTffd700}Ta5d6ffB333
Tffd700${Te6edf3bTffd700}Ta5d6ffcThis line will be centered.
So will this.
Tffd700${Te6edf3bTffd700}Ta5d6ffaThe alignment has now been returned to default.
Tffd700${Te6edf3bTffd700}Ta5d6ffrThis will be aligned to the right
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Formatting
Text can be formatted as Tffd700${Te6edf3bTffd700}Ta5d6ff!boldTffd700${Te6edf3bTffd700}Ta5d6ff! by using the Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff! tag, Tffd700${Te6edf3bTffd700}Ta5d6ff_underlineTffd700${Te6edf3bTffd700}Ta5d6ff_ by using the Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff_ tag and Tffd700${Te6edf3bTffd700}Ta5d6ff*italicTffd700${Te6edf3bTffd700}Ta5d6ff* by using the Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff* tag.
Here's an example of formatting text:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
We shall soon see Tffd700${Te6edf3bTffd700}Ta5d6ff!boldTffd700${Te6edf3bTffd700}Ta5d6ff! paragraphs of text decorated with Tffd700${Te6edf3bTffd700}Ta5d6ff_underlinesTffd700${Te6edf3bTffd700}Ta5d6ff_ and Tffd700${Te6edf3bTffd700}Ta5d6ff*italicsTffd700${Te6edf3bTffd700}Ta5d6ff*. Some even dare Tffd700${Te6edf3bTffd700}Ta5d6ff!Tffd700${Te6edf3bTffd700}Ta5d6ff*Tffd700${Te6edf3bTffd700}Ta5d6ff_combineTffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}Ta5d6ff them!
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
The above markup produces the following output:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaaTffd700${Te6edf3bTffd700}Ta5d6ffB333
We shall soon see Tffd700${Te6edf3bTffd700}Ta5d6ff!boldTffd700${Te6edf3bTffd700}Ta5d6ff! paragraphs of text decorated with Tffd700${Te6edf3bTffd700}Ta5d6ff_underlinesTffd700${Te6edf3bTffd700}Ta5d6ff_ and Tffd700${Te6edf3bTffd700}Ta5d6ff*italicsTffd700${Te6edf3bTffd700}Ta5d6ff*. Some even dare Tffd700${Te6edf3bTffd700}Ta5d6ff!Tffd700${Te6edf3bTffd700}Ta5d6ff*Tffd700${Te6edf3bTffd700}Ta5d6ff_combineTffd700${Te6edf3bTffd700}Ta5d6ff!Tffd700${Te6edf3bTffd700}Ta5d6ff*Tffd700${Te6edf3bTffd700}Ta5d6ff_ them!
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Sections
To create sections and subsections, use the > tag. This tag must be placed at the beginning of a line. To specify a sub-section of any level, use any number of > tags. If text is placed after a > tag, it will be used as a heading.
Here is an example of sections:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
High Level Stuff
This is a section. It contains this text.
Another Level
This is a sub section.
Going deeper
A sub sub section. We could continue, but you get the point.
Wait! It's worth noting that we can also create sections without headings. They look like this.
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
The above markup produces the following output:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaaTffd700${Te6edf3bTffd700}Ta5d6ffB333
High Level Stuff
This is a section. It contains this text.
Another Level
This is a sub section.
Going deeper
A sub sub section. We could continue, but you get the point.
Wait! It's worth noting that we can also create sections without headings. They look like this.
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Colors
Foreground colors can be specified with the Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ffF tag, followed by three hexadecimal characters. To return to the default foreground color, use the Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6fff tag. Background color is specified in the same way, but by using the Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ffB and Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ffb tags.
Here's a few examples:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
You can use Tffd700${Te6edf3bTffd700}Ta5d6ffB5d5Tffd700${Te6edf3bTffd700}Ta5d6ffF222 color Tffd700${Te6edf3bTffd700}Ta5d6fffTffd700${Te6edf3bTffd700}Ta5d6ffb Tffd700${Te6edf3bTffd700}Ta5d6ffFf00fTffd700${Te6edf3bTffd700}Ta5d6ffFf80oTffd700${Te6edf3bTffd700}Ta5d6ffFfd0rTffd700${Te6edf3bTffd700}Ta5d6ffF9f0mTffd700${Te6edf3bTffd700}Ta5d6ffF0f2aTffd700${Te6edf3bTffd700}Ta5d6ffF0fdtTffd700${Te6edf3bTffd700}Ta5d6ffF07ftTffd700${Te6edf3bTffd700}Ta5d6ffF43fiTffd700${Te6edf3bTffd700}Ta5d6ffF70fnTffd700${Te6edf3bTffd700}Ta5d6ffFe0fgTffd700${Te6edf3bTffd700}Ta5d6fff for some fabulous effects.
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
The above markup produces the following output:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaaTffd700${Te6edf3bTffd700}Ta5d6ffB333
You can use Tffd700${Te6edf3bTffd700}Ta5d6ffB5d5Tffd700${Te6edf3bTffd700}Ta5d6ffF222 color Tffd700${Te6edf3bTffd700}Ta5d6fffTffd700${Te6edf3bTffd700}Ta5d6ffB333 Tffd700${Te6edf3bTffd700}Ta5d6ffFf00fTffd700${Te6edf3bTffd700}Ta5d6ffFf80oTffd700${Te6edf3bTffd700}Ta5d6ffFfd0rTffd700${Te6edf3bTffd700}Ta5d6ffF9f0mTffd700${Te6edf3bTffd700}Ta5d6ffF0f2aTffd700${Te6edf3bTffd700}Ta5d6ffF0fdtTffd700${Te6edf3bTffd700}Ta5d6ffF07ftTffd700${Te6edf3bTffd700}Ta5d6ffF43fiTffd700${Te6edf3bTffd700}Ta5d6ffF70fnTffd700${Te6edf3bTffd700}Ta5d6ffFe0fgTffd700${Te6edf3bTffd700}Ta5d6fff for some fabulous effects.
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Links
Links to pages, files or other resources can be created with the Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff[ tag, which should always be terminated with a closing ]. You can create links with and without labels, it is up to you to control the formatting of links with other tags. Although not strictly necessary, it is good practice to at least format links with underlining.
Here's a few examples:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Here is a link without any label: Tffd700${Te6edf3bTffd700}Ta5d6ff[72914442a3689add83a09a767963f57c:/page/index.mu]
This is a Tffd700${Te6edf3bTffd700}Ta5d6ff[labeled linkTffd700${Te6edf3bTffd700}Ta5d6ff72914442a3689add83a09a767963f57c:/page/index.mu] to the same page, but it's hard to see if you don't know it
Here is Tffd700${Te6edf3bTffd700}Ta5d6ffF00aTffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6ff[a more visible linkTffd700${Te6edf3bTffd700}Ta5d6ff72914442a3689add83a09a767963f57c:/page/index.mu]Tffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6fff
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
The above markup produces the following output:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaaTffd700${Te6edf3bTffd700}Ta5d6ffB333
Here is a link without any label: Tffd700${Te6edf3bTffd700}Ta5d6ff[72914442a3689add83a09a767963f57c:/page/index.mu]
This is a Tffd700${Te6edf3bTffd700}Ta5d6ff[labeled linkTffd700${Te6edf3bTffd700}Ta5d6ff72914442a3689add83a09a767963f57c:/page/index.mu] to the same page, but it's hard to see if you don't know it
Here is Tffd700${Te6edf3bTffd700}Ta5d6ffF00fTffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6ff[a more visible linkTffd700${Te6edf3bTffd700}Ta5d6ff72914442a3689add83a09a767963f57c:/page/index.mu]Tffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6fff
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
When links like these are displayed in the built-in browser, clicking on them or activating them using the keyboard will cause the browser to load the specified URL.
Fields & Requests
Nomad Network let's you use simple input fields for submitting data to node-side applications. Submitted data, along with other session variables will be available to the node-side script / program as environment variables.
Request Links
Links can contain request variables and a list of fields to submit to the node-side application. You can include all fields on the page, only specific ones, and any number of request variables. To simply submit all fields on a page to a specified node-side page, create a link like this:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Ta5d6ff[Submit FieldsTffd700${Te6edf3bTffd700}Ta5d6ff:/page/fields.muTffd700${Te6edf3bTffd700}Ta5d6ff*]
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Note the Tffd700${Te6edf3bTffd700}Ta5d6ff!*Tffd700${Te6edf3bTffd700}Ta5d6ff! following the extra Tffd700${Te6edf3bTffd700}Ta5d6ff!Ta5d6ff\\Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}Ta5d6ff! at the end of the path. This Tffd700${Te6edf3bTffd700}Ta5d6ff!*Tffd700${Te6edf3bTffd700}Ta5d6ff! denotes Tffd700${Te6edf3bTffd700}Ta5d6ff*all fieldsTffd700${Te6edf3bTffd700}Ta5d6ff*. You can also specify a list of fields to include:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Ta5d6ff[Submit FieldsTffd700${Te6edf3bTffd700}Ta5d6ff:/page/fields.muTffd700${Te6edf3bTffd700}Ta5d6ffusername|auth_token]
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
If you want to include pre-set variables, you can do it like this:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Ta5d6ff[Query the SystemTffd700${Te6edf3bTffd700}Ta5d6ff:/page/fields.muTffd700${Te6edf3bTffd700}Ta5d6ffusername|auth_token|action=view|amount=64]
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Fields
Here's an example of creating a field. We'll create a field named Tffd700${Te6edf3bTffd700}Ta5d6ff!user_inputTffd700${Te6edf3bTffd700}Ta5d6ff! and fill it with the text Tffd700${Te6edf3bTffd700}Ta5d6ff!Pre-defined dataTffd700${Te6edf3bTffd700}Ta5d6ff!. Note that we are using background color tags to make the field more visible to the user:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
A simple input field: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<user_inputTffd700${Te6edf3bTffd700}Ta5d6ffPre-defined data>Tffd700${Te6edf3bTffd700}Ta5d6ffb
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
You must always set a field Tffd700${Te6edf3bTffd700}Ta5d6ff*nameTffd700${Te6edf3bTffd700}Ta5d6ff*, but you can of course omit the pre-defined value of the field:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
An empty input field: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<demo_emptyTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
You can set the size of the field like this:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
A sized input field: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<16|with_sizeTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
It is possible to mask fields, for example for use with passwords and similar:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
A masked input field: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<!|masked_demoTffd700${Te6edf3bTffd700}Ta5d6ffhidden text>Tffd700${Te6edf3bTffd700}Ta5d6ffb
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
And you can of course control all parameters at the same time:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Full control: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<!32|all_optionsTffd700${Te6edf3bTffd700}Ta5d6ffhidden text>Tffd700${Te6edf3bTffd700}Ta5d6ffb
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Collecting the above markup produces the following output:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaaTffd700${Te6edf3bTffd700}Ta5d6ffB333
A simple input field: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<user_inputTffd700${Te6edf3bTffd700}Ta5d6ffPre-defined data>Tffd700${Te6edf3bTffd700}Ta5d6ffB333
An empty input field: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<demo_emptyTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffB333
A sized input field: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<16|with_sizeTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffB333
A masked input field: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<!|masked_demoTffd700${Te6edf3bTffd700}Ta5d6ffhidden text>Tffd700${Te6edf3bTffd700}Ta5d6ffB333
Full control: Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<!32|all_optionsTffd700${Te6edf3bTffd700}Ta5d6ffhidden text>Tffd700${Te6edf3bTffd700}Ta5d6ffB333
Tffd700${Te6edf3bTffd700}Ta5d6ffb
Checkboxes
In addition to text fields, Checkboxes are another way of submitting data. They allow the user to make a single selection or select multiple options.
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Ta5d6ff<?|field_name|valueTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Label TextTffd700${Te6edf3bTffd700}
Tffd700${Te6edf3bTffd700}Ta5d6ff=
When the checkbox is checked, it's field will be set to the provided value. If there are multiple checkboxes that share the same field name, the checked values will be concatenated when they are sent to the node by a comma.
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<?|sign_up|1Tffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Sign me upTffd700${Te6edf3bTffd700}
Ta5d6ff
You can also pre-check both checkboxes and radio groups by appending a |* after the field value.
Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff<?|checkbox|1|*Tffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Pre-checked checkboxTffd700${Te6edf3bTffd700}
Ta5d6ff
Radio groups
Radio groups are another input that lets the user chose from a set of options. Unlike checkboxes, radio buttons with the same field name are mutually exclusive.
Example:
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Ta5d6ffB900Tffd700${Te6edf3bTffd700}Ta5d6ff<^|color|RedTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Red
Tffd700${Te6edf3bTffd700}Ta5d6ffB090Tffd700${Te6edf3bTffd700}Ta5d6ff<^|color|GreenTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Green
Tffd700${Te6edf3bTffd700}Ta5d6ffB009Tffd700${Te6edf3bTffd700}Ta5d6ff<^|color|BlueTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Blue
Tffd700${Te6edf3bTffd700}Ta5d6ff=
will render:
Tffd700${Te6edf3bTffd700}Ta5d6ffB900Tffd700${Te6edf3bTffd700}Ta5d6ff<^|color|RedTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Red
Tffd700${Te6edf3bTffd700}Ta5d6ffB090Tffd700${Te6edf3bTffd700}Ta5d6ff<^|color|GreenTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Green
Tffd700${Te6edf3bTffd700}Ta5d6ffB009Tffd700${Te6edf3bTffd700}Ta5d6ff<^|color|BlueTffd700${Te6edf3bTffd700}Ta5d6ff>Tffd700${Te6edf3bTffd700}Ta5d6ffb Blue
In this example, when the data is submitted, Tffd700${Te6edf3bTffd700}Ta5d6ffB444Tffd700${Te6edf3bTffd700}Ta5d6ff field_colorTffd700${Te6edf3bTffd700}Ta5d6ffb will be set to whichever value from the list was selected.
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Comments
You can insert comments that will not be displayed in the output by starting a line with the # character.
Here's an example:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaa
Tffd700${Te6edf3bTffd700}Ta5d6ff=
This line will
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
The above markup produces the following output:
Tffd700${Te6edf3bTffd700}Ta5d6ffFaaaTffd700${Te6edf3bTffd700}Ta5d6ffB333
This line will
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Literals
To display literal content, for example source-code, or blocks of text that should not be interpreted by micron, you can use literal blocks, specified by the Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff= tag. Below is the source code of this entire document, presented as a literal block.
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Ta5d6ff`Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3downloadFileTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3content Tff7b72= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4.Te6edf3contentTb4b4b4;
Tff7b72const Te6edf3blob Tff7b72= Tff7b72new Te6edf3BlobTb4b4b4(Tb4b4b4[Te6edf3contentTb4b4b4]Tb4b4b4, Tb4b4b4{ Te6edf3typeTff7b72: Ta5d6ff"text/plain" Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3url Tff7b72= Te6edf3URLTb4b4b4.Te6edf3createObjectURLTb4b4b4(Te6edf3blobTb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3a Tff7b72= Tffa657documentTb4b4b4.Te6edf3createElementTb4b4b4(Ta5d6ff"a"Tb4b4b4)Tb4b4b4;
Te6edf3aTb4b4b4.Te6edf3href Tff7b72= Te6edf3urlTb4b4b4;
Te6edf3aTb4b4b4.Te6edf3download Tff7b72= Ta5d6ff`Tffd700${Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4.Te6edf3nameTb4b4b4.Te6edf3replaceTb4b4b4(Ta5d6ff/\s+/gTb4b4b4, Ta5d6ff"_"Tb4b4b4)Tffd700}Ta5d6ff.muTa5d6ff`Tb4b4b4;
Tffa657documentTb4b4b4.Te6edf3bodyTb4b4b4.Te6edf3appendChildTb4b4b4(Te6edf3aTb4b4b4)Tb4b4b4;
Te6edf3aTb4b4b4.Te6edf3clickTb4b4b4(Tb4b4b4)Tb4b4b4;
Tffa657documentTb4b4b4.Te6edf3bodyTb4b4b4.Te6edf3removeChildTb4b4b4(Te6edf3aTb4b4b4)Tb4b4b4;
Te6edf3URLTb4b4b4.Te6edf3revokeObjectURLTb4b4b4(Te6edf3urlTb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3togglePublishMenuTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3showPublishMenu Tff7b72= Tff7b72!Tff7b72thisTb4b4b4.Te6edf3showPublishMenuTb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3showPublishMenuTb4b4b4) Tb4b4b4{
Tff7b72try Tb4b4b4{
Tff7b72const Te6edf3response Tff7b72= Tff7b72await Tffa657windowTb4b4b4.Te6edf3apiTb4b4b4.Te6edf3getTb4b4b4(Ta5d6ff"/api/v1/page-nodes"Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3pageNodes Tff7b72= Te6edf3responseTb4b4b4.Te6edf3dataTb4b4b4;
Tb4b4b4} Tff7b72catch Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3pageNodes Tff7b72= Tb4b4b4[Tb4b4b4]Tb4b4b4;
Tb4b4b4}
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3publishToNodeTb4b4b4(Te6edf3nodeTb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3tab Tff7b72= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4;
Tff7b72const Te6edf3pageName Tff7b72= Te6edf3tabTb4b4b4.Te6edf3nameTb4b4b4.Te6edf3replaceTb4b4b4(Ta5d6ff/\s+/gTb4b4b4, Ta5d6ff"_"Tb4b4b4)Tb4b4b4;
Tff7b72try Tb4b4b4{
Tff7b72await Tffa657windowTb4b4b4.Te6edf3apiTb4b4b4.Te6edf3postTb4b4b4(Ta5d6ff`Ta5d6ff/api/v1/page-nodes/Tffd700${Te6edf3nodeTb4b4b4.Te6edf3node_idTffd700}Ta5d6ff/pagesTa5d6ff`Tb4b4b4, Tb4b4b4{
Te6edf3nameTff7b72: Te6edf3pageNameTb4b4b4,
Te6edf3contentTff7b72: Te6edf3tabTb4b4b4.Te6edf3contentTb4b4b4,
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3showPublishMenu Tff7b72= Tff7b72falseTb4b4b4;
Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Ta5d6ff`Ta5d6ffPublished "Tffd700${Te6edf3pageNameTffd700}Ta5d6ff.mu" to Tffd700${Te6edf3nodeTb4b4b4.Te6edf3nameTffd700}Ta5d6ff`Tb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3eTb4b4b4) Tb4b4b4{
Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Te6edf3eTb4b4b4.Te6edf3responseTff7b72?Tb4b4b4.Te6edf3dataTff7b72?Tb4b4b4.Te6edf3message Tff7b72|| Ta5d6ff"Failed to publish page"Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3publishAllToNodeTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3pageNodesTb4b4b4.Te6edf3length Tff7b72=== T79c0ff0Tb4b4b4) Tff7b72returnTb4b4b4;
Tff7b72const Te6edf3nodeNames Tff7b72= Tff7b72thisTb4b4b4.Te6edf3pageNodesTb4b4b4.Te6edf3mapTb4b4b4(Tb4b4b4(Te6edf3nTb4b4b4) Tb4b4b4=> Te6edf3nTb4b4b4.Te6edf3nameTb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3nodeName Tff7b72= Te6edf3promptTb4b4b4(Ta5d6ff"Enter server name to publish all tabs to:\n\nAvailable: " Tff7b72+ Te6edf3nodeNamesTb4b4b4.Te6edf3joinTb4b4b4(Ta5d6ff", "Tb4b4b4)Tb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72!Te6edf3nodeNameTb4b4b4) Tff7b72returnTb4b4b4;
Tff7b72const Te6edf3node Tff7b72= Tff7b72thisTb4b4b4.Te6edf3pageNodesTb4b4b4.Te6edf3findTb4b4b4(Tb4b4b4(Te6edf3nTb4b4b4) Tb4b4b4=> Te6edf3nTb4b4b4.Te6edf3name Tff7b72=== Te6edf3nodeNameTb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72!Te6edf3nodeTb4b4b4) Tb4b4b4{
Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Ta5d6ff"Server not found: " Tff7b72+ Te6edf3nodeNameTb4b4b4)Tb4b4b4;
Tff7b72returnTb4b4b4;
Tb4b4b4}
Tff7b72let Te6edf3published Tff7b72= T79c0ff0Tb4b4b4;
Tff7b72for Tb4b4b4(Tff7b72const Te6edf3tab Tff7b72of Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3pageName Tff7b72= Te6edf3tabTb4b4b4.Te6edf3nameTb4b4b4.Te6edf3replaceTb4b4b4(Ta5d6ff/\s+/gTb4b4b4, Ta5d6ff"_"Tb4b4b4)Tb4b4b4;
Tff7b72try Tb4b4b4{
Tff7b72await Tffa657windowTb4b4b4.Te6edf3apiTb4b4b4.Te6edf3postTb4b4b4(Ta5d6ff`Ta5d6ff/api/v1/page-nodes/Tffd700${Te6edf3nodeTb4b4b4.Te6edf3node_idTffd700}Ta5d6ff/pagesTa5d6ff`Tb4b4b4, Tb4b4b4{
Te6edf3nameTff7b72: Te6edf3pageNameTb4b4b4,
Te6edf3contentTff7b72: Te6edf3tabTb4b4b4.Te6edf3contentTb4b4b4,
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Te6edf3publishedTff7b72++Tb4b4b4;
Tb4b4b4} Tff7b72catch Tb4b4b4{
Te6edf3consoleTb4b4b4.Te6edf3errorTb4b4b4(Ta5d6ff`Ta5d6ffFailed to publish tab: Tffd700${Te6edf3tabTb4b4b4.Te6edf3nameTffd700}Ta5d6ff`Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}
Tff7b72thisTb4b4b4.Te6edf3showPublishMenu Tff7b72= Tff7b72falseTb4b4b4;
Te6edf3DialogUtilsTb4b4b4.Te6edf3alertTb4b4b4(Ta5d6ff`Ta5d6ffPublished Tffd700${Te6edf3publishedTffd700}Ta5d6ff/Tffd700${Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3lengthTffd700}Ta5d6ff tabs to Tffd700${Te6edf3nodeTb4b4b4.Te6edf3nameTffd700}Ta5d6ff`Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>
Tb4b4b4<Tff7b72style Te6edf3scopedTb4b4b4>
Tb4b4b4.T56d364nodeContainer Tb4b4b4{
Tff7b72font-familyTb4b4b4: Ta5d6ff"Roboto Mono Nerd Font"Tb4b4b4, Te6edf3ui-monospaceTb4b4b4, Tff7b72monospaceTb4b4b4;
Tff7b72line-heightTb4b4b4: Tff7b72normalTb4b4b4;
Tff7b72letter-spacingTb4b4b4: Tff7b72normalTb4b4b4;
Tff7b72font-variant-ligaturesTb4b4b4: Tff7b72noneTb4b4b4;
Tff7b72font-feature-settingsTb4b4b4: Tff7b72normalTb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tb4b4b4.T56d364Mu-nlTff7b72) Tb4b4b4{
Tff7b72cursorTb4b4b4: Tff7b72pointerTb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tb4b4b4.T56d364Mu-mntTff7b72) Tb4b4b4{
Tff7b72displayTb4b4b4: Tff7b72inline-blockTb4b4b4;
Tff7b72box-sizingTb4b4b4: Tff7b72border-boxTb4b4b4;
Tff7b72min-widthTb4b4b4: T79c0ff1Tffa657chTb4b4b4;
Tff7b72widthTb4b4b4: T79c0ff1Tffa657chTb4b4b4;
Tff7b72max-widthTb4b4b4: T79c0ff1Tffa657chTb4b4b4;
Tff7b72text-alignTb4b4b4: Tff7b72centerTb4b4b4;
Tff7b72white-spaceTb4b4b4: Tff7b72preTb4b4b4;
Tff7b72text-decorationTb4b4b4: Tff7b72inheritTb4b4b4;
Tff7b72vertical-alignTb4b4b4: Tff7b72baselineTb4b4b4;
Tff7b72line-heightTb4b4b4: T79c0ff1.25Tb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tb4b4b4.T56d364Mu-mnt-fullTff7b72) Tb4b4b4{
Tff7b72displayTb4b4b4: Tff7b72inline-blockTb4b4b4;
Tff7b72box-sizingTb4b4b4: Tff7b72border-boxTb4b4b4;
Tff7b72min-widthTb4b4b4: T79c0ff2Tffa657chTb4b4b4;
Tff7b72widthTb4b4b4: T79c0ff2Tffa657chTb4b4b4;
Tff7b72max-widthTb4b4b4: T79c0ff2Tffa657chTb4b4b4;
Tff7b72text-alignTb4b4b4: Tff7b72centerTb4b4b4;
Tff7b72white-spaceTb4b4b4: Tff7b72preTb4b4b4;
Tff7b72text-decorationTb4b4b4: Tff7b72inheritTb4b4b4;
Tff7b72vertical-alignTb4b4b4: Tff7b72baselineTb4b4b4;
Tff7b72line-heightTb4b4b4: T79c0ff1.25Tb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tb4b4b4.T56d364Mu-mwsTff7b72) Tb4b4b4{
Tff7b72text-decorationTb4b4b4: Tff7b72inheritTb4b4b4;
Tff7b72displayTb4b4b4: Tff7b72inline-flexTb4b4b4;
Tff7b72flex-wrapTb4b4b4: Tff7b72wrapTb4b4b4;
Tff7b72align-itemsTb4b4b4: Tff7b72baselineTb4b4b4;
Tff7b72column-gapTb4b4b4: T79c0ff0Tb4b4b4;
Tff7b72row-gapTb4b4b4: T79c0ff0Tb4b4b4;
Tff7b72gapTb4b4b4: T79c0ff0Tb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tff7b72aTb4b4b4:Tf0883ehoverTff7b72) Tb4b4b4{
Tff7b72text-decorationTb4b4b4: Tff7b72underlineTb4b4b4;
Tb4b4b4}
Tb4b4b4<Tb4b4b4/Tff7b72styleTb4b4b4>
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────